@import "mixins";

*{
	
	margin: 0;padding: 0;
}
input,textarea,button,select{outline: none;}
a{
	text-decoration: none;
}
li{list-style: none;}
img{
	vertical-align: middle;
}
html,body{
	height:auto;
	// position: relative;
	
}
#topding{
	width: 50px;
	height: 55px;
	position: fixed;
	z-index: 5000;
	top:377px;
	display: none;
	
	right:0;
	// background:url(https://res.lancome.com.cn/build/images/new-img/back-top.png);
	>a{
		width: 100%;
		height: 100%;
		cursor: pointer;
	}
}
header{
	  width:100%;
	  height:136px;
	  position: relative;
  }
  

.header-container{
	width:100%;
	height:100%;
	background: #000000;
	margin: 0 auto;
	.header-top{
		height:74px;
		background: #000;
		text-align: center;
		position: relative ;
		.header-toplogo{
			width:184px;
			position: absolute;
			height:42px;
			background: #000;
			left:50%;
			top:50%;
			margin-left:-92px;
			margin-top:-21px;
			.header-toplogo>img{
					vertical-align: middle;
					
			}
		}
	}
	.header-bottom{
		height:61px;
		width: 100%;
		background: #000;
		z-index: 1000;
		.header-left{
			height:27px;
			float: left;
			margin-left: 22px;
			margin-top:15px;
			display: none;
		}
		.header-center{
			width:800px;
			height:100%;
			margin-left: 73px;
			float: left;
			.center-list{
				
				height:52px;
				line-height: 52px;
				>li{
					float: left;
					height:52px;
					line-height: 52px;
					margin-right: 35px;
					
					>a{
						vertical-align: middle;
						color: white;
						font-size: 14px;
						&:hover{
							opacity: 1;
							font-weight:900;
						}
					}
				}
				#ding1{
					background: #fff;
					width: 100%;
					height:360px;
					display: none;
					padding: 40px 233px 0 186px;
					margin: 0 auto;
					position: absolute;
					left: 0;
					top: 100%;
					z-index: 20000;
					box-sizing: border-box;
					.ding-left{
						width:500px;
						height:300px;
						padding:0 20px;
						float: left;
						border-right: 1px solid black;
						#dingtop{
							display: flex;
							justify-content: space-around;
							>a{
								margin-right: 10px;
								color: #000;
								font-weight: 900;
								font-size:14px;
							}
						}
						.ding1bottom{
							width:500px;
							height:200px;
							text-align: center;
							margin-top: 5px;
							>li{
								width:166px;
								float: left;
								line-height: 30px;

								>a{
									color: #000000;
									font-size:14px;
								}
							}
						}
					}
					
					.ding1-right{
						width: 389px;
						height:320px;
						float: left;
						text-align: center;
						padding:18px 0;
						box-sizing: border-box;
						#dd{
							font-size:14px;
							font-weight:900;
							height:40px;
							line-height: 40px;
						}
						#d2{
							font-size:14px;
							line-height: 20px;
							height:30px;
						}
					}
				}
				.ding1-2{
						background:#fff;
						width: 100%;
						height:360px;
						display: none;
						padding: 40px 104px 0 151px;
						margin: 0 auto;
						position: absolute;
						left: 0;
						top: 100%;
						z-index: 20000;
						box-sizing: border-box;
						.ding-left{
							width:662px;
							height:300px;
							float: left;
							border-right: 1px solid black;
							#dingtop{
								display: flex;
								justify-content: space-around;
								>a{
									margin-left: 0px;
									color: #000;
									font-weight: 900;
									font-size:14px;
									width: 100px;
								}
							}
							.ding1bottom{
								width:662px;
								height:200px;
								text-align: center;
								margin-top: 5px;
								>li{
									width:125px;
									float: left;
									line-height: 30px;
									margin-right: 40px;
									>a{
										color: #000000;
										font-size:14px;
									}
								}
							}
						}
						
						.ding1-right{
							width: 431px;
							height:320px;
							float: left;
							text-align: center;
							padding:18px 80px;
							box-sizing: border-box;
							#dd{
								font-size:14px;
								font-weight:900;
								height:40px;
								line-height: 40px;
							}
							#d2{
								font-size:14px;
								line-height: 20px;
								height:30px;
							}
						}
					
				}
				#ding2{
					width:1280px;
					height:442px;
					margin: 0 auto;
					position: absolute;
					left: 35px;
					display: none;
					top: 100%;
					z-index: 10000;
				}
				#ding3{
					width:568px;
					height:345px;
					margin: 0 auto;
					position: absolute;
					left:397px;
					display: none;
					top: 100%;
					z-index: 10000;
				}
			}
			
		}
	}
		.header-right{
			width:123px;
			height:52px;
			float: right;
			margin-right: 60px;
				// position: relative;
			display: flex;
			justify-content:space-between;
			align-items: center;
			.tu1{
				width:26px;
				height:26px;
				display: inline-block;
				float: left;
			
				//color: white;
				>a{
					color: white;
					font-size: 26px;
				}
				#dingtu3{
					width: 359px;
					height: 444px;
					position: absolute;
					right:60px;
					display: none;
					top: 100%;
					z-index: 10000;
					>p{
						height:32px;
						width:100%;
						background: #d51b51;
						font-size:13px;
						text-indent: 20px;
						line-height: 32px;
						letter-spacing: 3px;
					}
					.dingtu3-bt{
						width:359px;
						height:414px;
						border: 1px solid #ccc;
						background: white;
						box-sizing: border-box;
						padding:43px 40px 0 ;
						margin: 0 ;
						.bt-top{
							width:100%;
							height:33px;
							text-align: center;
							>li{
								float: left;
								width: 103px;
								height:39px;
								#d1{
									border-right:1px solid #999;
									color:black;
									padding:0  20px;
									font-size:25px;
									text-align: center;
									
								}
								#d2{
									color: #999;
										font-size:25px;
								}
							}
							#dddd{
								margin-left:35px;
							}
							
						}
						.bt-bottom{
							width:100%;
							height:200px;
							margin-top: 22px;
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							justify-content: space-around;
							>li{
								width:100%;
								height:39px;
								margin-top: 17px;
								#input1{
									width:100%;
									border:none;
									height:100%;
									vertical-align: top;
									text-indent: 10px;
								}
								#tishi1{
									position: relative;
									z-index: 3000;
									color: red;
									font-size: 14px;
								}
								.dakuai2{
									width: 126px;
									height: 100%;
									border:1px solid black;
									box-sizing: border-box;
									float: left;
									#input2{
										height:100%;
										width:100%;
										vertical-align: top;
										border: none;
										text-indent: 10px;
									}
								}
								
								.yanzheng{
									float: left;
									width: 30px;
									display: block;
									font-size: 12px;
									padding-left: 20px;
									height: 39px;
									font-weight: 900;
									color: #000000;
								}
								.kuai2right{
									float: right;
									font-size: 14px;
									height:100%;
									>a{
										width:50px;
										font-size: 14px;
										display: block;
										color:black;
									}
								}
								#input3{
									height:100%;
									border: none;
									width: 100%;
									text-indent: 10px;
								}
								#bb1{
									width: 80px;
									float: right;
									height: 100%;
									background: #000;
									border:1px solid #000;
									cursor:pointer;
									color: white;
								}
								#input4{
									width: 100%;
									border: none;
									background: #000;
									height: 100%;
									color: white;
									font-size: 19px;
									cursor: pointer;
								}
							}
							.biankuang{
								border: 1px solid #000;
								height:37px;
							}
							.kuang3{
								border: 1px solid black;
								width: 160px;
								height:37px;
								float: left;
							}
							
						}
						#mimadenglu{
							// text-decoration: underline;
							font-size: 16px;
							border-bottom: 1px solid #000;
							padding-bottom: 5px;
							color: black;
							
						}
						.sanfang{
							height:20px;
							margin-top: 32px;
							>p{
								font-size:16px;
								color: #000000;
								float: left;
								margin-right:10px;
							}
							>span{
								float: left;
								height:100%;
								>a{
									font-size:12px;
									height:100%;
									float: left;
									margin-right: 10px;
								}
							}
						}
						
					}
					
				}
				
				#dingtu1{
					width: 370px;
					height:382px;
					position: absolute;
					right:18px;
					display: none;
					top: 100%;
					background: white;
					z-index: 10000;
					padding: 45px;
					overflow-y:scroll;
					.shuru{
						width:100%;
						height:34px;
						// background: cyan;
						overflow: hidden;
						border-bottom: 4px solid #000;
						margin-bottom: 40px;
						#soutishi{
							float: left;
							width: 323px;
							border:none;
							height: 100%;
							font-size:16px;
							text-indent: 10px;
						}
						.soutishi1{
							position: absolute;
							z-index: 5000;
							clear: both;
							color: #000;
							left: -100px;
							background: #006600;
							width: 500px;
							height: 800px;
							font-size: 16px!important;
							>li{
								background: pink;
								color: black;
								font-size: 16px!important;
							}
						}
						.sousuo{
							float: right;
							height: 100%;
							text-align: center;
							>button{
								float: right;
								width: 30px;
								height: 100%;
								border: none;
								background: white;
								font-size:24px;
								cursor: pointer;
							}
						}
					}
					
					.s1{
						font-size:16px;
						margin-bottom: 40px;
						height: 25px;
						>a{
							color: #000;
							font-weight: 900;
							float: left;
						}
						.suaxin{
							float: right;
							color: #999;
						}
					}
					
					.s2{
						font-size:16px;
						height:25px;
						
						.suaxin2{
							float: left;
							font-weight: 900;
							color: #000;
						}
						.suaxin{
							float: right;
							color: #999;
								font-weight: 900;
						}
					}
					
					#liulan{
						width:100%;
						height:146px;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						margin: 10px 0;
						text-align: center;
						>li{
							box-sizing: border-box;
							text-align: center;
							float: left;
							
							>p{
								color:#000;
								font-size: 12px;
							margin-top: 10px;
							}
							>b{
								color:black;
								font-size: 12px;
							}
						}
					}
					>h3{
						height: 20px;
						font-size: 16px;
						color: #000000;
						margin-top: 30px;
					}
					.liu1{
						font-size: 14px;
						color: #666;
						margin-top: 10px;
						cursor: pointer;
						>a{
							font-size: 14px;
							margin-right: 30px;
							
							color: #666;
						}
					}
					
				}
				#dingtu2{
					width:567px;
					height: 269px;
					background: white;
					position: absolute;		
					right:50px;	
					   display: none;	
						padding: 20px  31px 0 31px;							
						top: 100%;				
						z-index: 10000;	
							// display: flex;
							flex-direction: column;
							
						.dingtu2top{
							height: 216px;
							width: 100%;
							background: white;
							.dingtu2left{
								color:black;
								width: 345px;
								height: 100%;
								float: left;
								>p{
									height:20px;
									line-height: 43px;
									font-size: 20px;
								}
								.tutu{
									width: 100%;
									height: 167px;
									margin-top: 65px;
									>img{
									float: left;
										vertical-align: middle;
									}
									#tu2cc{
										width:218px;
										float: right;
										height: 100%;
										vertical-align: middle;
										>a{
											display: block;
											color:black ;
											font-size: 16px;
											line-height: 23px;
											height: 23px;
											margin-bottom: 10px;
										}
										>b{
											
											margin-left: 10px;
										}
										>p{
											color: #999;
											font-size: 12px;
											>span{
												
											}
											
										}
									}
								}
							}
							.dingtu2right{
								width: 222px;
								height: 100%;
								float: left;
								
								.d2left{
									width: 70px;
									height: 100%;
									float: left;
									>p{
										width: 100%;
										height: 79px;
										color:black;
											font-weight: normal;
											line-height: 40px;
										font-size:20px;
										margin-top: 4px;
										text-align: center;
									}
								}
								.d2right{
									width: 152px;
									height: 100%;
									float: left;
									
									>p{
										width: 100%;
										height: 79px;
										color:black;
										font-size:20px;
											margin-top: 8px;
										font-weight: normal;
										text-align: center;
									}
								}
							}
						}
						.dingtu2bottom{
							width: 567px;
							height: 53px;
							background: #f5f5f5;
							box-sizing: border-box;
							padding-right:48px;
							>p{
								color:black;
								font-weight: normal;
								text-align: center;
									font-size:20px;
									float: right;
									margin-left: 53px;
							}
						}							
											
				}
				
			}
		}
	
}






	// 导航
	
	
.bananer1{
	width:1346px;
	height:385px!important;
	margin: 0 ;padding: 0;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	.bananer1content{
		height:385px!important;
		width:9000px;
		
		position: absolute;
		left: 0; top: 0;
			 .img1{
				float:left;
				width:1346px;
				height:385px;
			}
		}
	
	.navlist{
		position: absolute;
		bottom:-20px;
		width: 275px;
		height: 15px;
		left:673px;
		background: gray;
		.nav1{
			width: 15px;
			height: 15px;
			background:black;
			float: left;
			margin-right: 50px;
			border-radius: 50%;
		}
		.active{
		}	
	}
}


.biaoti1{
	display: inline-block;
	display: block;
	margin: 80px 0 0 0 ;
	text-align: center;
	font-size: 36px;
	font-weight:normal;
}
//轮播2
	.swiper-container{
		width:1346px;
		height:620px;
		text-align: center;
		.baokuai{
			width:415px;
			height:620px;
			float: left;
			margin-right: 33px;
			>img{
				
				vertical-align:middle;
			}
			.a1{
				width:415px;
				height:123px;
				display: block;
				box-sizing: border-box;
				padding: 20px 14px;
				text-align: center;
				>h2{
					font-size: 26px;
					line-height: 26px;
					font-weight:normal;
					color: #000000;
				}
				>p{
					color:#666;
					font-size: 16px;
					margin: 13px 0 18px 0;
				}
				>b{
					color:black;
					font-size: 16px;
					
				}
		}
		
		}
		.goumai{
			width: 118px;
			height: 38px;
			background: #000;
			line-height: 38px;
			margin-left: 152px;
			>a{
				color:white;
				font-size:16px;
			}
		}
	}
	.bianpink{
		background:#d61b52!important;
	}
  
  //菁纯奢宠臻献
.biaoti2 {display: inline-block;
	display: block;
	margin: 0 auto ;
	text-align: center;
	font-size: 36px;
	font-weight:normal;
	
	margin:63px 0 32px;
	}
	//图片板块
	.imgbox{
		width:100%;
		height:471px;
		.imgcontent{
			  padding: 0 14px;
			  width:1317px;
			  height:100%;
			  margin: 0 auto;
		}
	}
	//兰蔻菁纯奢宠家族
	.biaotilist{
		margin:0 auto;
		width:1346px;
		
		.biaoti3 {display: inline-block;
			display: block;
			font-size: 31px;
			font-weight:normal;
			margin: 30px 0 12px ;
			
			color:black;
			padding: 0 14px;
			}
		.xiaobiaoti {display: inline-block;
			display: block;
			font-size: 16px;
			font-weight:normal;
			color:#787878;
			padding: 0 14px;
			}
	}
	
		// 官网特别服务
		.biaoti4 {display: inline-block;
			display: block;
			font-size: 36px;
			font-weight:normal;
			margin: 30px 0 12px 0 ;
			color:black;
			padding: 0 14px;
			text-align: center;
			}
			// 产品列表
	.chanpin{
		width:1346px;
		height:620px;
		text-align: center;
		margin-top: 30px;
		margin:0 auto;
		.baokuai{
			width:415px;
			height:620px;
			float: left;
			margin-right: 33px;
			>img{
				
				vertical-align:middle;
			}
			.a1{
				width:415px;
				height:92px;
				display: block;
				box-sizing: border-box;
				padding: 20px 14px;
				text-align: center;
				>h2{
					font-size: 26px;
					line-height: 26px;
					font-weight:normal;
					color: #000000;
				}
				>p{
					color:#666;
					font-size: 16px;
					margin: 13px 0 0 0;
				}
				
		}
		
		}
		.goumai{
			width: 118px;
			height: 38px;
			background: #000;
			line-height: 38px;
			margin-left: 152px;
			>a{
				color:white;
				font-size:16px;
			}
		}
	}
	// 最后大图
	.lasttu{
		width:100%;
		height:387px;
		.lasttu1{
			width:1346px;
			height:100%;
			margin-top:20px;
			margin:0 auto;
			background: #000;
			>img{
				vertical-align: middle;
			}
		}
	}
	// 兰蔻官网footer
	footer{
		width: 100%;
		height:784px;
		.footer-top{
			width:1346px;
			height:634px;
			background: #000;
			margin: 0 auto;
			.footer-top1{
				width:100%;
				height:342px;
				background:#000;
				box-sizing: border-box;
				padding-top:45px ;
				border-bottom: 1px solid gray;
				>h2{
					font-size: 22px;
					text-align: center;
					color: white;
				}
				>ul{
					height:275px;
					width:1346px;
					display: flex;
					justify-content: space-around;
					align-items: center;
					
					>li{
						width:107px;
						background: black;
						text-align: center;
						
						>h3{
							font-size: 16px;
							font-weight:normal;
							color: white;
							margin:12px auto;
						}
						>p{
							color: #999;
							font-size: 14px;
						}
					}
				}
			}
			.footer-top2{
				width:100%;
				height:292px;
				background: pink;
					.top2-1{
						height:142px;
						width:1346px;
						display: flex;
						justify-content: space-around;
						box-sizing: border-box;
						padding-left: 73px;
						align-items: center;
						background: #000;
						>li{
							height:85px;
							text-align: left;
							
							>h3{
								font-size: 16px;
								font-weight:normal;
								color: white;
							}
							>a{
								color: #999;
								font-size: 14px;
								display: block;
								margin-top: 12px;
							}
						}
					
				}
				.top2-2{
					width:1346px;
					height: 150px;
					background: #000;
					box-sizing: border-box;
					padding: 50px 953px 51px 153px;
					>p{
						font-size: 13px;
						font-weight: 800;
						color: white;
					}
					.topyouxiangput{
						width:234px;
						height:30px;
						border:1px solid gray;
						display: flex;
						justify-content: space-between;
						align-items: center;
						background: #000;
						#input-yx{
							border: none;
							width:181px;
							height: 21px;
							display:block;
							background: #000;
							color: gray;
							border-right: 1px solid gray;
							text-indent: 20px;
						}
						button{
							flex: 1;
							height:21px;
							border: none;
							background: #000;
							color:white;
						}
					}
				}
			}
		}
		.footer-bottom{
			width:1346px;
			height:150px;
			background:white;
			margin: 0 auto;
			.list1{
				width:100%;
				height:82px;
				background: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				>li{
					float: left;
					margin-right: 20px;
					span{
						color:#000;
						font-size:12px;
					}
					>a{
						color:#000;
						font-size:12px;
					}
				}
			}
			.list2{
				display: flex;
				justify-content: center;
				align-items: center;
				>li{
					margin-right: 5px;
					height:100%;
					>a{
						border-right:1px solid #999;
						margin-right: 5px;
						padding-right: 5px;
						font-size: 12px;
						color:#999;
					}
					.active{
						border:none!important;
					}
				}
			}
			>p{
				text-align: center;
				
				>a{
					color: #999;
					font-size:12px;
					line-height: 40px;
				}
			}
		}
	}
	